'use client'
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'

const ThemeSwitch = () => {
    const [mounted, setMounted] = useState(false)
    const { setTheme, resolvedTheme } = useTheme()

    useEffect(() => {
        // setMounted(true)
        return setMounted(true)
    }, [])

    if (!mounted) {
        return <div>-</div>
    }

    if (resolvedTheme === 'dark') {
        return (
            <div onClick={() => setTheme('light')}>SunIcon</div>
        )
    }

    if (resolvedTheme === 'light') {
        return (
            <div onClick={() => setTheme('dark')}>darkIcon</div>
        )
    }
}

export default ThemeSwitch